<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserAccountBalanceService, rechargeUserAccountService } from '@/apis/wallet'
import { useUserStore } from '@/stores'

const UserStore = useUserStore()

// 用ID
const userID = ref(null)

// 用户当前账户余额
const userBalance = ref(null)

// 用户可充值金额列表
const amountList = ref(['50', '100', '200', '300', '500', '800'])

// 当前选中的充值金额序号
const currentIndex = ref(null)

// 当前选中的充值金额
const currentRechargeValue = ref(null)

// 用户输入的充值金额
const userInputRechargeValue = ref(null)

// 获取用户账户余额
const getUserAccountBalance = async () => {
	const res = await getUserAccountBalanceService(userID.value)
	userBalance.value = res?.data?.money
}

// 选择充值金额
const onClickAmountItem = (item, index) => {
	userInputRechargeValue.value = null
	currentIndex.value = index
	currentRechargeValue.value = item
}

// 聚焦输入框时触发函数
const onFocusInput = () => {
	currentIndex.value = null
}

// 确认充值
const onConfirmRecharge = () => {
	if (!currentRechargeValue.value && !userInputRechargeValue.value) {
		uni.showToast({
			icon: 'error',
			title: '请选择充值金额'
		})
		return
	}

	uni.showModal({
		title: '确认充值',
		content: '您确定要充值吗',
		confirmText: '确认',
		cancelText: '取消',
		success: async (res) => {
			if (res.confirm) {
				try {
					if (userInputRechargeValue.value) {
						currentRechargeValue.value = userInputRechargeValue.value
					}

					await rechargeUserAccountService({
						user_id: userID.value,
						amount: currentRechargeValue.value
					})

					// 充值成功后弹出成功提示框
					uni.showModal({
						title: '充值成功',
						content: `您已成功充值 ${currentRechargeValue.value} 元！`,
						showCancel: false, // 不显示取消按钮
						confirmText: '好的',
						success: () => {
							getUserAccountBalance() // 刷新余额
							currentIndex.value = null
							currentRechargeValue.value = null
							userInputRechargeValue.value = null
						}
					})
				} catch (error) {
					uni.showToast({
						icon: 'error',
						title: '充值失败！'
					})
				}
			}
		}
	})
}

onLoad(() => {
	userID.value = UserStore.UserInfoList.user_id
	getUserAccountBalance()
})
</script>
<template>
	<view class="container" v-if="userBalance">
		<view class="balance">
			<view class="title">钱包余额</view>
			<view class="money" v-if="userBalance">{{ userBalance }}</view>
		</view>

		<view class="amount">
			<view class="amount-title">充值金额</view>
			<view class="amount-list">
				<view class="amount-item" @tap="onClickAmountItem(item, index)" v-for="(item, index) in amountList" :key="index" :class="{ active: currentIndex === index }">
					<view class="amount-money">￥</view>
					<view class="number">{{ item }}</view>
				</view>
			</view>
			<view class="amount-input">
				<up-input
					@focus="onFocusInput"
					border="bottom"
					fontSize="20px"
					color="#9708cc"
					fontWeigh="bold"
					placeholder="自定义金额"
					type="digit"
					v-model.trim="userInputRechargeValue"
				></up-input>
			</view>
		</view>

		<view class="footer">
			<view class="recharge-btn" @tap="onConfirmRecharge">确认充值</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;

	.balance {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 25%;
		margin: 30rpx;
		padding: 50rpx;
		border-radius: 30rpx;
		background-image: linear-gradient(135deg, #43cbff 10%, #9708cc 100%);
		color: #fff;

		.title {
			font-size: 40rpx;
			padding-bottom: 10rpx;
		}

		.money {
			font-size: 80rpx;
			font-weight: bold;
		}
	}

	.amount {
		height: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx;
		border-radius: 30rpx;
		background-color: #fff;

		.amount-title {
			font-size: 40rpx;
			font-weight: bold;
			padding: 0 40rpx 40rpx 30rpx;
		}

		.amount-list {
			display: grid;
			grid-template-rows: repeat(2, 1fr);
			grid-template-columns: repeat(3, 1fr);

			.amount-item {
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				padding: 40rpx;
				margin: 20rpx;
				border-radius: 30rpx;
				background-color: #fff;
				color: #9708cc;
				box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
				border: 4rpx solid #f5f5f5;

				.money {
					font-size: 30rpx;
				}

				.number {
					font-size: 45rpx;
					font-weight: bold;
				}

				&.active {
					background-image: linear-gradient(135deg, #43cbff 10%, #9708cc 100%);
					color: #fff;
					box-shadow: 0px 6px 12px rgba(151, 8, 204, 0.5);
					transform: translateY(-4rpx);
					border: none;
					transition: all 0.2s;
				}
			}
		}

		.amount-input {
			padding: 40rpx 20rpx;
			font-weight: bold;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 13%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		border-radius: 30rpx;
		padding-top: 30rpx;

		.recharge-btn {
			width: 90%;
			padding: 30rpx;
			border-radius: 999px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: linear-gradient(135deg, #43cbff 10%, #9708cc 100%);
			color: #fff;
		}
	}
}
</style>
